<template>
  <div class="progress-input">
    <el-slider class="progress" v-model="progressValue" v-bind="itemProps" @change="change" />
    <el-input
      class="small-input"
      v-model.number="progressValue"
      @blur="handle"
      @keyup.enter.prevent="handle"
    />
  </div>
</template>

<script setup lang="ts">
import { clamp } from 'lodash';

interface IProps {
  modelValue: number;
  min: number;
  max: number;
  step?: number;
}

defineOptions({
  name: 'ProgressInput',
});

const props = withDefaults(defineProps<IProps>(), {
  modelValue: 0,
  min: 0,
  max: 1,
  step: 1,
});

const { modelValue, ...itemProps } = props;
const progressValue = ref(modelValue);

const emits = defineEmits(['update:modelValue', 'change']);

const change = () => {
  emits('update:modelValue', progressValue.value);
};
const handle = () => {
  let valid = true,
    value;
  if (progressValue.value === '' || isNaN(progressValue.value)) {
    valid = false;
    return;
  }
  value = clamp(progressValue.value, props.min, props.max);
  progressValue.value = value;
  change();
};
</script>

<style lang="less" scoped>
.progress-input {
  display: flex;
  align-items: center;
  width: 100%;

  .progress {
    width: 0;
    flex: 1;
  }

  .small-input {
    width: 66px;
    margin-left: 7px;
  }
}
</style>
